<template>
  <div class="p-d">
    <div class="p-d b-f">
      <SearchComp :searchForm="searchForm" :searchData="queryString" :searchAction="searchAction"></SearchComp>
    </div>
    <div class="m-t p-d b-f">
      <div class="btnStyle flex-between ">
        <ButtonComp :buttonData="buttonData" />
      </div>
      <TableCompEle class="m-t" ref="multipleTable" :tableData="tableData" :tableConfig="tableConfig" :tableAction="tableAction" :isSelect="true"
        :isIndex="true" :isShowPage="true" :queryParams="queryParams" @getPagination="getList" @handleSelectionChange="handleSelectionChange">
      </TableCompEle>
    </div>
    <PreviewPdf v-if="showPdf" :pdfUrl="pdfUrl" @closeLookPdf="closeLookPdf" />
    <Add ref="addRef" @close="getList" />
  </div>
</template>

<script>
import PreviewPdf from '@/views/common/previewPdf.vue'
import Add from '../common/add.vue'
export default {
  components: { PreviewPdf, Add },
  data() {
    return {
      showPdf: false,
      pdfUrl: null,
      multipleSelection: [],
      queryParams: {
        total: 20,
        currentPage: 1,
        pageSize: 10
      },
      buttonData: [
        {
          kind: 'button',
          label: '一键设置预约方式及规则',
          plain: false,
          size: 'small',
          type: 'warning',
          click: () => {
          }
        },
      ],
      tableData: [
        {
          name: '光谱仪',
          name2: '分析仪器',
          name3: '武器研究院',
          name4: '需要审核',
          name5: '按机时预约',
          name6: '需要考核',
          name7: '8:30-18:30',
          name8: '280小时',
          num: 'SP400',
          status: 1,
          statusValue: "待审核"
        },
        {
          name: '燃烧性能测试设备',
          name2: '电子测量仪',
          name3: '武器研究院',
          name4: '需要审核',
          name5: '按机时预约',
          name6: '需要考核',
          name7: '8:30-18:30',
          name8: '160小时',
          num: 'SBI',
          status: 1,
          statusValue: "待审核"
        },
        {
          name: '数字化扫描电子显微镜',
          name2: '分析仪器',
          name3: '武器研究院',
          name4: '需要审核',
          name5: '按机时预约',
          name6: '需要考核',
          name7: '8:30-18:30',
          name8: '90小时',
          num: 'KYKY2800',
          status: 1,
          statusValue: "待审核"
        },
        {
          name: 'Agilent5973色质联用仪',
          name2: '分析仪器',
          name3: '武器研究院',
          name4: '需要审核',
          name5: '按机时预约',
          name6: '需要考核',
          name7: '8:30-18:30',
          name8: '140小时',
          num: 'GC/MSD',
          status: 1,
          statusValue: "待审核"
        },
        {
          name: '锥形量热仪',
          name2: '分析仪器',
          name3: '武器研究院',
          name4: '不需要审核',
          name5: '按机时预约',
          name6: '需要考核',
          name7: '8:30-18:30',
          name8: '150小时',
          num: 'FTT-DUALCONE',
          status: 2,
          statusValue: "待审核"
        },
        {
          name: '全波段CCD物证照相系统',
          name2: '海洋仪器',
          name3: '武器研究院',
          name4: '不需要审核',
          name5: '按机时预约',
          name6: '需要考核',
          name7: '8:30-18:30',
          name8: '200小时',
          num: 'MINGBU-U6',
          status: 3,
          statusValue: "待审核"
        },
      ],
      tableConfig: [
        {
          prop: 'name',
          label: '仪器名称'
        },
        {
          prop: 'name2',
          label: '仪器类别'
        },
        {
          prop: 'num',
          label: '型号'
        },
        {
          prop: 'name3',
          label: '所属单位'
        },
        {
          prop: 'name4',
          label: '预约审核'
        },
        {
          prop: 'name5',
          label: '预约方式'
        },
        {
          prop: 'name6',
          label: '是否需要考核'
        },
        {
          prop: 'name7',
          label: '开放预约时段'
        },
        {
          prop: 'name8',
          label: '最大可预约时长'
        },
      ],
      tableAction: {
        align: () => 'center',
        width: () => String(190),
        operations: [
          {
            label: '查看',
            isLink: true,
            type: 'primary',
            method: row => {
              const obj = {
                title: '查看预约方式及规则',
                type: 'look',
                data: row
              }
              this.$refs.addRef.show(obj)
            }
          },
          {
            label: '预约方式及规则',
            isLink: true,
            type: 'primary',
            method: row => {
              const obj = {
                title: '设置预约方式及规则',
                type: 'edit',
                data: row
              }
              this.$refs.addRef.show(obj)
            }
          },
        ]
      },
      queryString: {
        name: '',
        yearStr: ''
      },
      searchForm: {
        changeMethod: () => {
          this.queryParams.currentPage = 1
          this.getList()
        },
        formData: [
          {
            type: 'Input',
            label: '仪器名称',
            prop: 'name',
            clearable: true,
            icon: 'el-icon-search',
            placeholder: '请输入'
          },
          {
            type: 'Input',
            label: '仪器分类',
            prop: 'name',
            clearable: true,
            icon: 'el-icon-search',
            placeholder: '请输入'
          },
        ]
      },
      searchAction: [
        {
          label: '查询',
          type: 'primary',
          handle: () => {
            this.queryParams.currentPage = 1
            this.$refs.multipleTable.clearSelection()
          }
        },
        {
          label: '重置',
          type: 'primary',
          plain: true,
          handle: () => {
            this.queryString = {
              name: '',
              yearStr: ''
            }
            this.queryParams.currentPage = 1
          }
        }
      ]
    }
  },
  methods: {
    getList() { }
  },
}
</script>

<style lang="less" scoped>
</style>